<template><!--短信记录-->
  <div class="allBox">
    <div class="webPageTitle">短信记录</div>
    <div class="leftTitle">
      <div style="float: right;width: 280px" class="myFromBox">
        <Input v-model="queryAccount"    placeholder="请输入要查询的电话号码"  >
        <Button slot="append" icon="ios-search"  @click="selectOrd(1)" ></Button>
        </Input>
      </div>
      <div style="float: right;" class="myFromBox">
        <DatePicker  @on-clear="clearTime" type="datetimerange"  format="yyyy年MM月dd日"  placement="bottom-end" placeholder="请选择日期" v-model="searchTime"  @on-ok="clickTime" style="width: 225px"></DatePicker>
      </div>

    </div>
    <div>
      <div style="float: left;width: 100%;margin-top: 10px">
        <Table   highlight-row   :loading="loading"    :columns="ordColumns" :data="ordData" ></Table>
      </div>
      <div  class="pageBox" >


        <Page :total="total"  :page-size="rows" show-total @on-change="selectOrd" class="pageStyle"></Page>
      </div>
    </div>

    <!--读取API错误-->
    <template>
      <Modal v-model="redAPIModal" width="360">
        <p slot="header" style="color:#f60;text-align:left">
          <Icon type="information-circled"></Icon>
          <span>{{redAPIModalTit}}</span>
        </p>
        <div style="text-align:left">
          <p>错误信息：</p>
          <p>{{redAPIModalCen}}</p>
        </div>
        <div slot="footer">
          <Button type="error" size="large" long  @click="redAPIModalFun">确定</Button>
        </div>
      </Modal>

    </template>
  </div>
</template>
<script>
  export  default {
    data(){
      return{
        optionTime:{
          disabledDate(date){
            return date  && date.valueOf() > Date.now() ;
          }
        },
        ordColumns:[
          {title:'ID',key:'id',align:'center'},
          {title:'IP地址',key:'ip',align:'center'},
          {title:'账号',key:'account',align:'center'},
          {title:'内容',key:'content',align:'center'},
          {title:'记录时间',key:'createTm',align:'center'},
        ],
        ordData:[],
        rows:'',
        total:0,
        balance:0,
        redAPIModal:false,
        redAPIModalTit:'',
        redAPIModalCen:'',
        queryIP:'',
        queryAccount:'',
        searchTime:'',
        loading:true
      }
    },
    methods:{
      /**
       * 获取短信记录信息
       *
       * @param  {integer}  page  页码
       * @param  {integer}  rows  每页条数
       *
       * @return  {object}  res   数据集合
       * * */
      selectOrd:function (page) {
        var _self = this;

        _self.$http.get(_self.service + '/sms/list',{params:{
          page:page,
          rows:_self.rows,
          account:_self.queryAccount,
          startTm:this.searchTime[0],
          endTm:this.searchTime[1],
        }}).then(function (res) {
          if(res.data.code == '001'){
            var tableData = res.data.result.data;
            for(var i in tableData) {
              var dataTm = new Date(tableData[i].createTm);
              var tiem = _self.formatDate(dataTm, 'yyyy-MM-dd hh:mm');
              tableData[i].createTm = tiem;
            }
            _self.ordData = tableData
            _self.total = res.data.result.total;
            _self.loading = false
          }else{
            _self.modalFun('获取短信记录信息错误',res.data.msg)
          }

        })

      },

      /**
       *获取浏览器高度对 table的 row 显示进行数量控制
       * */
      tableRowH:function(){
        var winHeight = document.documentElement.clientHeight;
        this.rows = Math.floor((winHeight - (40+50+50+100))/52)-2;
      },

      /**
      *Modal弹出层
       * */
      modalFun:function (modTit,modCen) {
        this.redAPIModal = true;
        this.redAPIModalTit = modTit;
        this.redAPIModalCen = modCen;
      },
      redAPIModalFun:function () {
        this.redAPIModal = false
      },

      /**
        *获取选中日期
       * */
      clickTime:function () {
        for(var i in this.searchTime){
          let dataTm  = new Date(this.searchTime[i]);
          let time =  this.formatDate(dataTm,'yyyy-MM-dd hh:mm');
          var oldTime = (new Date(time)).getTime();
          this.searchTime[i] = oldTime
        }
        if(this.searchTime[0]  == this.searchTime[1]){
          this.searchTime[1] = this.searchTime[1]+86400000
        }else{
          this.searchTime[1] = this.searchTime[1] + (86400000-1)
        }
        this.selectOrd(1)
      },
      clearTime:function () {
        this.searchTime[0] = '';
        this.searchTime[1] = '';
        this.selectOrd(1)
      }

    },
    created:function(){
      this.tableRowH();
      this.selectOrd("1")
    }

  }
</script>
<style scoped>



  .pageBox{
    float: left;
    width: 100%;
    margin-top: 10px
  }
  .pageStyle{
    float: right;
    margin-right: 20px;
    margin-bottom: 10px;
  }

</style>
